<template>
  <div>
    <div class="box clear">
      <div class="left fleft">
        <div class="top border">
          <div>
            <div class="text-box clear" style="margin-top:2vh;">
              <p class="fleft top_order">
                <strong>出口国家总数&nbsp;</strong>
                <strong>{{traceDataList.totalCountryNum}}</strong>
                <strong>个</strong>
              </p>
              <p class="fleft top_p">
                <span>{{traceDataList.totalEUnum}}笔</span>
                <span>欧盟</span>
              </p>
              <p class="fleft top_p">
                <span>{{traceDataList.monthASEANnum}}笔</span>
                <span>东盟</span>
              </p>
              <p class="fleft top_p">
                <span>{{traceDataList.totalOBORnum}}笔</span>
                <span>一带一路</span>
              </p>
            </div>
            <div class="text-box clear">
              <p class="fleft top_order">
                <strong>本月出口国家&nbsp;</strong>
                <strong>{{traceDataList.monthCountryNum}}</strong>
                <strong>个</strong>
              </p>
              <p class="fleft top_p">
                <span>{{traceDataList.monthEUnum}}笔</span>
                <span>欧盟</span>
              </p>
              <p class="fleft top_p">
                <span>{{traceDataList.monthASEANnum}}笔</span>
                <span>东盟</span>
              </p>
              <p class="fleft top_p">
                <span>{{traceDataList.monthOBORnum}}笔</span>
                <span>一带一路</span>
              </p>
            </div>
          </div>
        </div>
        <div class="bottom border">
          <transition name="el-zoom-in-center">
            <div v-if="bigData.length>0" v-show="tshow" class="clear tips">
              <div class="fleft num">{{orderObj.addr}}</div>
              <div class="fleft text">
                <p>订单总数 {{orderObj.num}} 笔</p>
                <p>出口金额 {{(orderObj.money/10000).toFixed(4)}} 万美元</p>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="right fright">
        <div class="top border">
          <div
            :style="{lineHeight:'50px',borderBottom:'1px solid #8c939d',fontWeight:'600',paddingLeft:'10px'}"
          >出口国家订单趋势(日统计)</div>
          <div style="height: 300px;margin-top:10px;" id="mix-line-bar"></div>
        </div>
        <div class="center border">
          <div
            :style="{lineHeight:'50px',borderBottom:'1px solid #8c939d',fontWeight:'600',paddingLeft:'10px'}"
          >贸易国家企业数目统计(总统计)</div>
          <div style="height:200px;margin-top:10px;" id="line_garget"></div>
        </div>
        <div class="bottom border">
          <div
            :style="{lineHeight:'50px',borderBottom:'1px solid #8c939d',fontWeight:'600',paddingLeft:'10px'}"
          >目标国家订单占比(整体)</div>
          <div style="height:300px;margin-top:10px;" id="line_stack"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  traceData,
  traceDataNut,
  traceDataBasic,
  traceDataBig,
  traceDataLine
} from "@/api/analysis";
export default {
  name: "hello",
  data() {
    return {
      tableData: [],
      traceDataList: [],
      traceNutList: [],
      traceBasicList: [],
      bigData: [],
      orderObj: {},
      tshow: true
    };
  },
  mounted() {
    this.line_stack();
    this.mix_line_bar();
    this.line_garget();
    this.getTraceData();
    this.traceBigData();
  },
  methods: {
    traceBigData() {
      traceDataBig()
        .then(res => {
          if (res.code == 0) {
            this.bigData = res.data;
            let arr = res.data;
            let timer = null;
            let num = 0;
            let that = this;
            let obj = {};
            obj.index = 1;
            obj.money = arr[0].money;
            obj.addr = arr[0].title;
            obj.num = arr[0].num;
            that.orderObj = obj;
            clearInterval(timer);
            timer = setInterval(function() {
              num++;
              that.tshow = !that.tshow;
              setTimeout(function() {
                if (num == arr.length) {
                  num = 0;
                }
                let obj = {};
                obj.index = num + 1;
                obj.money = arr[num].money;
                obj.addr = arr[num].title;
                obj.num = arr[num].num;
                that.orderObj = obj;
                that.tshow = !that.tshow;
              }, 200);
            }, 3000);
          } else {
            console.log(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getTraceData() {
      traceData().then(res => {
        if (res.code == 0) {
          this.traceDataList = res.data;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    line_stack() {
      traceDataBasic().then(res => {
        if (res.code == 0) {
          let titleData = [];
          let valData = [];
          // let numData = [];
          // let moneyData = [];
          res.data.forEach(el => {
            let obj = {};
            titleData.push(el.title);
            // numData.push(el.num);
            // moneyData.push(el.money);
            obj.value = el.num;
            obj.name = el.title;
            valData.push(obj);
          });

          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("line_stack")
          );
          // 绘制图表
          let option = {
            title: {
              // text: "目标国家订单占比(整体)",
              // subtext: '纯属虚构',
              x: "center"
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} 笔 ({d}%)"
            },
            legend: {
              orient: "vertical",
              left: "left",
              data: titleData
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                radius: "55%",
                center: ["62%", "50%"],
                data: valData,
                // data: [
                //   { value: 335, name: "欧盟" },
                //   { value: 310, name: "东盟" },
                //   { value: 234, name: "一带一路" }
                // ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                }
              }
            ]
          };

          myChart.setOption(option);
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    mix_line_bar() {
      traceDataLine().then(res => {
        if (res.code == 0) {
          console.log(res.data);
          let resultOBORList = res.data.resultOBORList;
          let resultEUList = res.data.resultEUList;
          let resultASEANList = res.data.resultASEANList;
          let numOborData = [];
          let numEuData = [];
          let numAseanData = [];
          resultOBORList.forEach(el => {
            numOborData.push(el.num);
          });
          resultEUList.forEach(el => {
            numEuData.push(el.num);
          });
          resultASEANList.forEach(el => {
            numAseanData.push(el.num);
          });
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("mix-line-bar")
          );
          // 绘制图表
          app.config = {
            rotate: 90,
            align: "left",
            verticalAlign: "middle",
            position: "insideBottom",
            distance: 15,
            onChange: function() {
              var labelOption = {
                normal: {
                  rotate: app.config.rotate,
                  align: app.config.align,
                  verticalAlign: app.config.verticalAlign,
                  position: app.config.position,
                  distance: app.config.distance
                }
              };
              myChart.setOption({
                series: [
                  {
                    label: labelOption
                  },
                  {
                    label: labelOption
                  },
                  {
                    label: labelOption
                  },
                  {
                    label: labelOption
                  }
                ]
              });
            }
          };

          var labelOption = {
            normal: {
              show: true,
              position: app.config.position,
              distance: app.config.distance,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              rotate: app.config.rotate,
              formatter: "{c}  {name|{a}}",
              fontSize: 16,
              rich: {
                name: {
                  textBorderColor: "#fff"
                }
              }
            }
          };

          let option = {
            color: ["#003366", "#006699", "#4cabce"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: ["欧盟", "东盟", "一带一路"]
            },

            calculable: true,
            xAxis: [
              {
                type: "category",
                axisTick: { show: false },
                data: res.data.dateList
              }
            ],
            yAxis: [
              {
                  name: "单位（笔）",
                  type: "value"
              }
            ],
            series: [
              {
                name: "欧盟",
                type: "bar",
                barGap: 0,
                // label: labelOption,
                data: numEuData
              },
              {
                name: "东盟",
                type: "bar",
                // label: labelOption,
                data: numAseanData
              },
              {
                name: "一带一路",
                type: "bar",
                // label: labelOption,
                data: numOborData
              }
            ]
          };
          myChart.setOption(option);
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    line_garget() {
      traceDataNut().then(res => {
        if (res.code == 0) {
          this.traceNutList = res.data;
          let titleData = [];
          let datas = [];
          res.data.forEach(el => {
            let obj = {};
            obj.value = el.num;
            obj.name = el.title;
            titleData.push(el.title);
            datas.push(obj);
          });

          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("line_garget")
          );
          // 绘制图表
          let option = {
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} 家 ({d}%)"
            },
            legend: {
              orient: "vertical",
              x: "left",
              data: titleData
            },
            series: [
              {
                name: "国家贸易占比",
                type: "pie",
                radius: ["50%", "70%"],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: "center"
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: "30",
                      fontWeight: "bold"
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: datas
              }
            ]
          };
          myChart.setOption(option);
        } else {
          this.$notify.error(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  margin: 20px;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 20px;
  max-width: 1200px;
  .left {
    width: calc(100% - 420px);
    margin-right: 20px;
    .border {
      border: 1px solid #87b4e4;
      box-shadow: 0px 0px 10px #87b4e4;
      border-radius: 8px;
    }
    .top {
      height: 20vh;
      box-shadow: 0px 0px 10px #87b4e4;
      margin-bottom: 20px;
      .text-box {
        .top_order {
          box-sizing: border-box;
          width: 40%;
          margin: 0;
          font-size: 20px;
          margin-top: 10px;
          padding-left: 10px;
          & > :nth-child(2) {
            display: inline-block;
            text-align: right;
            width: 60px;
            font-size: 30px;
            color: blue;
          }
        }
        .top_p {
          width: 20%;
          font-weight: 500;
          & > :nth-child(1) {
            display: inline-block;
            font-weight: 600;
            width: 60px;
            color: blue;
          }
        }
      }
    }
    .bottom {
      position: relative;
      min-height: calc(70vh + 20px);
      background: url("../../assets/trace-chart-bg.png") no-repeat center;
      -webkit-background-size: cover;
      background-size: cover;
    }
  }
  .right {
    width: 400px;

    .border {
      border: 1px solid #87b4e4;
      box-shadow: 0px 0px 10px #87b4e4;
      border-radius: 8px;
      .right_hand {
        display: flex;
        height: 30%;
        justify-content: space-around;
        border-top: 1px solid #333;
        font-size: 13px;
        font-weight: 600;
        padding: 10px;
      }
    }
    .top {
      /*height: 45vh;*/
    }
    .center {
      margin-top: 20px;
      margin-bottom: 20px;
      /*height: 30vh;*/
    }
    .bottom {
      position: relative;
      /*height: 45vh;*/
    }
  }
}

.tips {
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin-left: -80px;
  .num {
    height: 106px;
    padding-left: 10px;
    padding-right: 10px;
    color: #fdfdfd;
    line-height: 106px;
    font-size: 30px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    background: rgba(48, 49, 51, 0.6);
  }
  .text {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;

    span {
      display: inline-block;
      line-height: 30px;
      text-indent: 20px;
    }
    em {
      font-style: normal;
    }
    p {
      margin: 0;
      padding: 0;
      margin-top: 10px;
      text-align: left;
      padding-right: 20px;
      padding-left: 20px;
    }
    height: 106px;
    color: #e3e3e3;
    background: rgba(238, 238, 238, 0.3);
  }
}

@import "@/styles/common.scss";
</style>